<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 数据字典</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="tabData">
                <el-tab-pane :label="`品牌`" name="1">
                    <div class="handle-row">
                        <el-button type="primary" icon="el-icon-plus"  @click="addDict">添加</el-button>
                    </div>
                    <el-table
                        :data="oneTabelData"
                        border
                        class="table mid"
                        ref="oneTab">
                        <el-table-column prop="parName" label="类别"></el-table-column>
                        <el-table-column prop="dictName" label="名称"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    icon="el-icon-edit"
                                    class="mid"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    icon="el-icon-delete"
                                    class="red mid"
                                    @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane :label="`材质`" name="3">
                     <div class="handle-row">
                         <el-button type="primary" icon="el-icon-plus"  @click="addDict">添加</el-button>
                    </div>
                    <el-table
                        :data="threeTabelData"
                        border
                        class="table mid"
                        ref="oneTab">
                        <el-table-column prop="parName" label="类别"></el-table-column>
                        <el-table-column prop="dictName" label="名称"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    icon="el-icon-edit"
                                    class="mid"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    icon="el-icon-delete"
                                    class="red mid"
                                    @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>   
                <el-tab-pane :label="`型号`" name="2">
                     <div class="handle-row">
                        <el-select v-model="TwoMaterial" @change="twoChange" placeholder="材质" class="handle-input mr10">
                            <el-option v-for="item in threeTabelData" :key="item.id" :label="item.dictName" :value="item.id"></el-option>
                        </el-select>
                        <el-button type="primary" icon="el-icon-plus"  @click="addDict">添加</el-button>
                    </div> 
                    <el-table
                        :data="twoTabelData"
                        border
                        class="table mid"
                        ref="oneTab">
                        <el-table-column prop="parName" label="类别"></el-table-column>
                        <el-table-column prop="dictName" label="名称"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    icon="el-icon-edit"
                                    class="mid"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    icon="el-icon-delete"
                                    class="red mid"
                                    @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane :label="`吨位`" name="4">
                    <div class="handle-row">
                        <el-select v-model="ThreeMaterial" @change="fourChange"  placeholder="材质" class="handle-input mr10">
                            <el-option v-for="item in threeTabelData" :key="item.id" :label="item.dictName" :value="item.id"></el-option>
                        </el-select>
                        <el-button type="primary" icon="el-icon-plus"  @click="addDict">添加</el-button>
                    </div>
                    <el-table
                        :data="fourTabelData"
                        border
                        class="table mid"
                        ref="oneTab">
                        <el-table-column prop="parName" label="类别"></el-table-column>
                        <el-table-column prop="dictName" label="名称"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    icon="el-icon-edit"
                                    class="mid"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    icon="el-icon-delete"
                                    class="red mid"
                                    @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 输入框 -->
        <el-dialog :title="title" :visible.sync="dialogVis" width="30%">
            <el-form ref="addForm" :model="addForm" label-width="70px">
                <el-form-item label="类别">
                    <el-input v-model="addForm.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVis = false">取 消</el-button>
                <el-button type="primary" @click="saveForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'dect',
        data() {
            return {
                tabData:"1",
                onePid:'',
                twoPid:'',
                threePid:'',
                fourPid:'',
                TwoMaterial:'',
                ThreeMaterial:'',
                oneTabelData:[],
                twoTabelData:[],
                threeTabelData:[],
                fourTabelData:[],
                addForm:{
                    type:'',
                    name:''
                },
                title:'添加数据',
                dialogVis:false
            }
        },
        created() {
            this.getData();
        },
        methods: {
            fourChange(value){
                for(var i=0;i<this.threeTabelData.length;i++){
                    if(value == this.threeTabelData[i].id){
                        this.ThreeMaterial = value;
                        if(this.threeTabelData[i].children == null){
                            this.addChild(this.threeTabelData[i].id);
                        }else{
                            for(var j=0;j<this.threeTabelData[i].children.length;j++){
                                 if(this.threeTabelData[i].children[j].dictValue==(this.threeTabelData[i].id+'_吨位')){
                                    console.log('container 吨位' +this.threeTabelData[i].children[j].dictValue)
                                    console.log(this.threeTabelData[i].children[j])
                                    this.fourPid = this.threeTabelData[i].children[j].id;
                                     if(this.threeTabelData[i].children[j].children == null){
                                        this.fourTabelData =[];
                                    }else{
                                        for(var m=0;m<this.threeTabelData[i].children[j].children.length;m++){
                                            this.threeTabelData[i].children[j].children[m].parName = "吨位"
                                        }
                                        this.fourTabelData = this.threeTabelData[i].children[j].children;
                                    }
                                    break;
                                 }   
                            }

                        }
                        break;
                    }
                }
            },
            twoChange(value){
                console.log(value);
                for(var i=0;i<this.threeTabelData.length;i++){
                    if(value == this.threeTabelData[i].id){
                        this.TwoMaterial = value;
                        if(this.threeTabelData[i].children == null){
                            this.addChild(this.threeTabelData[i].id);
                        }else{
                            for(var j=0;j<this.threeTabelData[i].children.length;j++){
                                if(this.threeTabelData[i].children[j].dictValue==(this.threeTabelData[i].id+'_型号')){
                                    console.log('container 型号' +this.threeTabelData[i].children[j].dictValue)
                                    console.log('container 型号id' +this.threeTabelData[i].children[j].id)
                                    this.twoPid = this.threeTabelData[i].children[j].id;
                                    if(this.threeTabelData[i].children[j].children == null){
                                        this.twoTabelData =[];
                                    }else{
                                        for(var m=0;m<this.threeTabelData[i].children[j].children.length;m++){
                                            this.threeTabelData[i].children[j].children[m].parName = "型号"
                                        }
                                        this.twoTabelData = this.threeTabelData[i].children[j].children;
                                    }
                                    break;
                                }   
                            }

                        }
                        break;
                    }
                 }
            },
            addChild(id){
                // 给材质添加child
                console.log("addchild" +id)
                var params = {
                    pid:id,
                    type:0,
                    dictKey:id+"_model",
                    dictValue:id+"_型号",
                    dictCode:id+"_model",
                    dictName:id+"_型号",
                }
                this.$http.postHead('hgz/dict/save',params).then(res =>{
                    console.log(res);
                })

                var params2 = {
                    pid:id,
                    type:0,
                    dictKey:id+"_weight",
                    dictValue:id+"_吨位",
                    dictCode:id+"_weight",
                    dictName:id+"_吨位",
                }
                var addid = id;
                this.$http.postHead('hgz/dict/save',params2).then(res =>{
                    this.getTreePid(addid);
                })
            },
            getTreePid(id){
                var addid = id;
                this.$http.postHead('hgz/dict/getTree').then(res =>{
                    console.log("for out" +addid)
                    for(var i=0;i<res.data.length;i++){
                        if(res.data[i].dictValue == '材质'){
                            for(var j=0;j<res.data[i].children.length;j++){
                                console.log(res.data[i].children[j].id);
                                if(res.data[i].children[j].id == addid){
                                    var dataList = res.data[i].children[j].children;
                                    for(var k=0;k<dataList.length;k++){
                                        if(dataList[k].dictValue==(addid+'_型号')){
                                            console.log('container 型号' +dataList[k].dictValue)
                                            console.log('container 型号id' +dataList[k].id)
                                            this.twoPid = dataList[k].id;
                                            this.twoTabelData = dataList[k].children;
                                        }else if(dataList[k].dictValue==(addid+'_吨位')){
                                            console.log('container _吨位' +dataList[k].dictValue)
                                            console.log('container _吨位id' +dataList[k].id)
                                            this.fourPid = dataList[k].id;
                                            this.fourTabelData = dataList[k].children;
                                        }
                                    }
                                    break;
                                }
                            }
                            break;
                        }
                    }
                });
            },
            getData() {
                this.$http.postHead('hgz/dict/getTree').then(res =>{
                    if(res.status){
                        for(var i=0;i<res.data.length;i++){
                            if(res.data[i].children!=null){
                                for(var j=0;j<res.data[i].children.length;j++){
                                    res.data[i].children[j].parName = res.data[i].dictValue
                                }
                            }
                            if(res.data[i].dictValue == '品牌'){
                                this.onePid = res.data[i].id;
                                this.oneTabelData = res.data[i].children;
                            }else if(res.data[i].dictValue == '材质'){
                                this.threeTabelData = res.data[i].children;
                                this.threePid = res.data[i].id;

                                for(var j=0;j<res.data[i].children.length;j++){
                                console.log(res.data[i].children[j].id);
                                if(res.data[i].children[j].id == this.TwoMaterial){
                                    var dataList = res.data[i].children[j].children;
                                    for(var k=0;k<dataList.length;k++){
                                        if(dataList[k].dictValue==(this.TwoMaterial+'_型号')){
                                            console.log('container 型号' +dataList[k].dictValue)
                                            console.log('data' +dataList[k])
                                            this.twoPid = dataList[k].id;
                                            if(dataList[k].children==null){
                                                this.twoTabelData = [];
                                            }else{
                                                for(var m=0;m<dataList[k].children.length;m++){
                                                    dataList[k].children[m].parName = "型号"
                                                }
                                                this.twoTabelData = dataList[k].children;
                                            }
                                        }else if(dataList[k].dictValue==(this.TwoMaterial+'_吨位')){
                                            console.log('container _吨位' +dataList[k].dictValue)
                                            console.log('data' +dataList[k])
                                            this.fourPid = dataList[k].id;
                                            if(dataList[k].children==null){
                                                this.fourTabelData = [];
                                            }else{
                                                for(var m=0;m<dataList[k].children.length;m++){
                                                    dataList[k].children[m].parName = "吨位"
                                                }
                                                this.fourTabelData = dataList[k].children;
                                            }
                                        }
                                    }
                                }else if(res.data[i].children[j].id == this.ThreeMaterial){
                                    var dataList = res.data[i].children[j].children;
                                    for(var k=0;k<dataList.length;k++){
                                        if(dataList[k].dictValue==(this.ThreeMaterial+'_型号')){
                                            console.log('container 型号' +dataList[k].dictValue)
                                            console.log('data' +dataList[k])
                                            this.twoPid = dataList[k].id;
                                            if(dataList[k].children==null){
                                                this.twoTabelData = [];
                                            }else{
                                                for(var m=0;m<dataList[k].children.length;m++){
                                                    dataList[k].children[m].parName = "型号"
                                                }
                                                this.twoTabelData = dataList[k].children;
                                            }
                                        }else if(dataList[k].dictValue==(this.ThreeMaterial+'_吨位')){
                                            console.log('container _吨位' +dataList[k].dictValue)
                                            console.log('data' +dataList[k])
                                            this.fourPid = dataList[k].id;
                                            if(dataList[k].children==null){
                                                this.fourTabelData = [];
                                            }else{
                                                for(var m=0;m<dataList[k].children.length;m++){
                                                    dataList[k].children[m].parName = "吨位"
                                                }
                                                this.fourTabelData = dataList[k].children;
                                            }
                                        }
                                    }
                                }
                            }

                            }
                            // else if(res.data[i].dictValue == '型号'){
                            //     this.twoTabelData = res.data[i].children;
                            //     this.twoPid = res.data[i].id;
                            // }else if(res.data[i].dictValue == '吨位'){
                            //     this.fourTabelData = res.data[i].children;
                            //     this.fourPid = res.data[i].id;
                            // }
                        }
                    }
                })
            },
            saveForm(){
                var params = {
                    pid:this.addForm.pid,
                    type:1,
                    dictKey:this.addForm.pid+"_"+this.tabData+"_"+this.addForm.name,
                    dictValue:this.addForm.pid+"_"+this.tabData+"_"+this.addForm.name,
                    dictCode:this.addForm.pid+"_"+this.tabData+"_"+this.addForm.name,
                    dictName:this.addForm.name,
                }
                if(this.tabData == "3"){
                    params.type = 0;
                }
                if(this.addForm.id != null){
                    params.id = this.addForm.id
                }
                if(this.addForm.name == ""){
                    this.$message({
                        type: 'error',
                        message: "请输入名称"
                    }); 
                    return;
                }
                this.$http.postHead('hgz/dict/save',params).then(res =>{
                    if(res.status){
                        this.dialogVis = false;
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        });
                        this.getData();
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.message
                        });   
                    }
                })

            },
            addDict(){
                this.dialogVis = true;
                var type = "";
                var title = '';
                var pid = '';
                if(this.tabData == "1"){
                    type = "品牌";
                    title = "添加品牌";
                    pid = this.onePid;
                }else if(this.tabData == "3"){
                    type = "材质";
                    title = "添加材质";
                    pid = this.threePid;
                }else if(this.tabData == "2"){
                    type = "型号";    
                    title = "添加型号";
                    pid = this.twoPid;
                }else if(this.tabData == "4"){
                    type = "吨位";
                    title = "添加吨位";
                    pid = this.fourPid;
                }
                console.log(this.tabData);
                console.log(this.threePid);

                this.title = title;
                this.addForm = {
                    type:type,
                    name:'',
                    pid:pid
                }
            },
            handleEdit(index,row){
                console.log(row);
                this.dialogVis = true;
                var type = "";
                var title = '';
                var pid = '';
                if(this.tabData == "1"){
                    type = "品牌";
                    title = "修改品牌";
                    pid = this.onePid;
                }else if(this.tabData == "2"){
                    type = "型号";    
                    title = "修改型号";
                    pid = this.twoPid;
                }else if(this.tabData == "3"){
                    type = "材质";
                    title = "修改材质";
                    pid = this.threePid;
                }else if(this.tabData == "4"){
                    type = "吨位";
                    title = "修改吨位";
                    pid = this.fourPid;
                }
                this.title = title;
                this.addForm = {
                    type:type,
                    name:row.dictName,
                    id:row.id,
                    pid:pid
                }
            },

            handleDelete(index,row){
                console.log(row);
                this.$confirm('此操作将永久删除该数据,会影响前面的钢材价格, 是否继续删除?', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let id = row.id;
                    var url = `hgz/dict/deleteById/${id}`;
                    if(row.hasChild){
                        url = `hgz/dict/deleteNodeAndChild/${id}`;
                    }
                    this.$http.postHead(url)
                    .then(res =>{
                        if(res.status){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getData();
                        }else{
                            this.$message({
                                type: 'error',
                                message: res.message
                            });   
                        }
                    })
                }).catch(() =>{
                    
                });
                

            },
            
        },
        computed: {
            unreadNum(){
                return this.unread.length;
            }
        }
    }

</script>

<style>
.handle-row{
    margin-top: 3px;
    margin-bottom: 5px;
}
.red{
    color: red;
}
.mid{
    font-size: 16px;;
}
.handle-input {
    width: 160px;
    display: inline-block;
}
.mr10 {
    margin-right: 30px;
}
</style>

